import React,{ Component } from 'react';
import { connect } from 'react-redux'
import ImageLazy from './commons/ImageLazy';
import NavLink from './commons/NavLink';

const index_banner_swiper1 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_banner_swiper1.jpg');
const index_banner_swiper2 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_banner_swiper2.jpg');
const index_banner_swiper3 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_banner_swiper3.jpg');
const index_banner_swiper4 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_banner_swiper4.jpg');
const index_today = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_today.png');
const index_transform = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_transform.png');
const index_community = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_community.png');
const index_money = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_money.png');
const index_order = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_order.png');
const index_img1 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_img1.jpg');
const index_img2 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_img2.jpg');
const index_img3 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_img3.jpg');
const index_img4 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_img4.jpg');
const index_img5 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_img5.jpg');
const index_img6 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_img6.jpg');
const index_img7 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_img7.jpg');
const index_img8 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_img8.jpg');

const mall_weiz = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/mall_weiz.png');
const mall_meif = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/mall_meif.png');
const mall_doctor = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/mall_doctor.png');
const mall_hospital = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/mall_hospital.png');

import {index_data} from '../actions';

import Swiper from 'swiper';

let head_swiper;
let mydefault = React.createClass({
  componentDidMount:function(){
    const {dispatch} = this.props;
    //  dispatch(index_data());
    //首页banner轮播
    head_swiper= new Swiper('.head_swiper',{
       pagination: '.pagination',
       paginationClickable: true,
       autoplay:3000,
       speed:800,
       calculateHeight:true,
       onTouchStart:function(){
         head_swiper.stopAutoplay();
       },
       onTouchEnd:function(){
         head_swiper.startAutoplay();
       }
     });
  },
  componentDidUpdate:function(){
    head_swiper.reInit();
  },
  render:function(){
    const {banner_swiper,content_swiper} = this.props||[];
    const to_banner_swiper = banner_swiper||[];
    const to_content_swiper = content_swiper||[];
    return(
      <div id="index">
        <header>
            <div className="head_swiper swiper-container">
              <div className='swiper-wrapper'>
                <div className="swiper-slide">
                  <NavLink to="/about">
                    <ImageLazy src={index_banner_swiper1} style={{height:'4.8rem'}} />
                  </NavLink>
                </div>
                <NavLink to="/hos/det/50" className="swiper-slide">
                  <a href="javascript:void(0)">
                    <ImageLazy src={index_banner_swiper3} style={{height:'4.8rem'}} />
                  </a>
                </NavLink>
                <NavLink to="/crowdFunding" className="swiper-slide">
                  <a href="javascript:void(0)">
                    <ImageLazy src={index_banner_swiper4} style={{height:'4.8rem'}} />
                  </a>
                </NavLink>
              </div>
              <div className="pagination"></div>
            </div>
          <nav className="border_b1">
            <div className="wrapper">
              <NavLink to="/indexView/to_index/order">
                <div>
                  <em>定制<br/><small>CUSTOMIZED</small></em>
                </div>
                <ImageLazy src={index_order} style={{width:'.4rem'}} /><br/>
                定制
              </NavLink>
              <NavLink to="/indexView/to_index/them_weiz">
                <div>
                  <em>微整<br/><small>PLASTIC</small></em>
                </div>
                <ImageLazy src={mall_weiz} style={{width:'.45rem'}} /><br/>
                微整
              </NavLink>
              <NavLink to="/indexView/to_index/them_meif">
                <div>
                  <em>美肤<br/><small>BEAUTY</small></em>
                </div>
                <ImageLazy src={mall_meif} style={{width:'.45rem'}} /><br/>
                美肤
              </NavLink>
              <NavLink to="/indexView/to_index/them_doc">
                <div>
                  <em>医生<br/><small>DOCTOR</small></em>
                </div>
                <ImageLazy src={mall_doctor} style={{width:'.48rem'}} /><br/>
                医生
              </NavLink>
              <NavLink to="/indexView/to_index/them_hos">
                <div>
                  <em>医院<br/><small>HOSPITAL</small></em>
                </div>
                <ImageLazy src={mall_hospital} style={{width:'.46rem'}} /><br/>
                医院
              </NavLink>
            </div>
          </nav>
        </header>
        <div className="container">
          {this.props.children}
        </div>
      </div>
    )
  }
})


const mapStateToProps = (state) => {
  const {banner_swiper} = state.app.index_data||[];
  const {content_swiper} = state.app.index_data||[];
  return {
    banner_swiper,content_swiper
  }
}

export default connect(mapStateToProps)(mydefault)
